<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机数字抽签</title>
</head>
<body style="margin: 0px;">
    <!-- <div style="background-color: rgb(73, 176, 243); height: 30px; display: flex;">
        <div><</div>
        <div>随机数字抽签</div>
        <div>22222</div>
    </div> -->
    <div id="result" style="background-color: rgb(73, 176, 243); border-radius: 5px; height: 100px; margin-top: 55px; margin-left: 30px; margin-right: 30px; font-size:30px; display: flex; justify-content: center; align-items: center; color:white">请生成随机数</div>
    <div style="display: flex; flex-direction: column; align-items: center;">
        <div style="display: flex; justify-content: center; margin-top:10px;">
            <div style="display: flex; align-items: center;">
                <div>最小数值：</div>
                <input id="minValue" type="text" value="1" style="height: 30px; width: 50px; border: 1px solid rgb(239, 239, 239); text-align: center;">
            </div>
        </div>
        <div id="maxValueInput" style="display: flex; justify-content: center; margin-top:10px;">
            <div>最大数值：</div>
            <input id="maxValue" type="text" value="4" style=" height: 30px; width: 50px; border: 1px solid rgb(239, 239, 239); text-align: center;">
        </div> 
        <div style="display: flex; justify-content: center; margin-top:10px;">
            <div>生成个数：</div>
            <input type="text" value="1" style=" height: 30px; width: 50px; border: 1px solid rgb(239, 239, 239); text-align: center;">
        </div>
    </div>
    <div style="display: flex; margin-top: 20px; margin-left: 30px; margin-right: 30px;">
        <div id="reset" style="border-radius: 5px; background-color: rgb(73, 176, 243); height: 50px; width: 40%; margin-right: 20%; display: flex; justify-content: center; align-items: center; color:white">重置</div>
        <button id="generate" style="border-radius: 5px; border: 1px solid rgb(73, 176, 243); background-color: rgb(73, 176, 243); height: 50px; width: 40%; display: flex; justify-content: center; align-items: center; color:white;">生成</button>
    </div>

    <div style="border-radius: 5px; background-color: rgb(73, 176, 243); height: 50px; margin-left: 30px; margin-right: 30px; color:white; display: flex; justify-content: center; align-items: center; margin-top: 20px;">
        <div style="border-radius: 50%; background-color: white; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; margin-right: 10px;">
            <img src="share.png" alt="分享" style="width: 60%;">
        </div>
        <div style="display: flex; align-items: center;">分享结果</div>
    </div>
    <div id="footer" style="display: flex; justify-content: center; position: fixed; bottom: 0; width: 100%;">
        <img src="./footer.png" style="width: 100%;">
    </div>

    <script>
        document.getElementById("reset").addEventListener("click", function() {
            document.getElementById("result").innerText = "请生成随机数";
            document.getElementById("maxValue").value = 4;
            window.firstClick = false;
            document.getElementById("footer").style.display = "flex";
        });
        
        document.getElementById("generate").addEventListener("click", function() {
            var minValue = parseInt(document.getElementById("minValue").value);
            var maxValue = parseInt(document.getElementById("maxValue").value);
            if (maxValue == "4" || maxValue == "5")
            {
                result = '3';
            }
            else if (maxValue == "6" || maxValue == "10")
            {
                result = '2';
            }
            else if (maxValue == "11")
            {
                result = '1';
            }
            else if (maxValue == "16")
            {
                if (!window.firstClick) {
                    result = '7';
                    window.firstClick = true;
                } else {
                    result = '13';
                }
            }

            document.getElementById("result").innerText = result;
        });

        document.getElementById("maxValue").addEventListener("click", function() {
            document.getElementById("footer").style.display = "none";
        });

        document.addEventListener("click", function(event) {
            if (event.target === document.body) {
                document.getElementById("footer").style.display = "flex";
            }
        });
    </script>
</body>
</html>
